<script setup>
import {ref} from "vue";
import Left1 from "@/components/left1.vue";
import Right1 from "@/components/right1.vue";
import Right2 from "@/components/right2.vue";
import Right3 from "@/components/right3.vue";
import MapCenter from "@/components/map-center.vue";
// 流量数组
const flowArr = ref([
  {
    name: '今日流量',
    config: {
      number: [0],
      textAlign: 'left',
      style: {
        fill: '#fff',
      },
      animationFrame: 30,
    }
  },
  {
    name: '昨日流量',
    config: {
      number: [0],
      textAlign: 'left',
      style: {
        fill: '#fff',
      }
    }
  },
  {
    name: '本周流量',
    config: {
      number: [0],
      textAlign: 'left',
      style: {
        fill: '#fff',
      }
    }
  },
  {
    name: '本月流量',
    config: {
      number: [0],
      textAlign: 'left',
      style: {
        fill: '#fff',
      }
    }
  },
])

flowArr.value.forEach((item, index) => {
  setTimeout(() => {
    item.config.number = [Math.floor(Math.random() * 10000)]
  }, 1000)
})


const config = ref({
  header: ['列1', '列2', '列3'],
  headerBGC: 'rgba(18,34,46,0)',
  oddRowBGC: 'rgba(18,34,46,0)',
  evenRowBGC: 'rgba(13,35,50,0.52)',
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3'],
  ],
  index: true,
  columnWidth: [50],
  align: ['center'],
})
</script>

<template>
  <dv-full-screen-container style="background: url('/src/assets/bg.png') no-repeat;background-size: 100% 100%;position: relative;">
    <div class="title">阜新交通信息服务平台</div>
    <div class="left">
      <div class="left-title">
        <span>地区流量</span>
      </div>
      <div class="left-content" style="padding-top: 30px">
        <div class="left-content-desc" v-for="item in flowArr" :key="item.name">
            <div class="left-content-desc-title">{{ item.name }}</div>
            <div class="left-content-desc-flop"><dv-digital-flop :config="item.config" /></div>
        </div>
      </div>
      <div class="left-title">
        <span>流量排名</span>
      </div>
      <div class="left-content" style="height: 294px;">
        <left1 />
      </div>
      <div class="left-title">
        <span>流量</span>
      </div>
      <div class="left-content" style="height: 294px;padding-top: 10px">
        <dv-scroll-board ref="scrollBoard" :config="config" style="width:500px;height:220px"/>
      </div>
    </div>
    <div class="map">
      <map-center />
    </div>
    <div class="right">
      <div class="left-title">
        <span>地区流量</span>
      </div>
      <div class="left-content">
        <right1 />
      </div>
      <div class="left-title">
        <span>流量排名</span>
      </div>
      <div class="left-content" style="height: 294px;">
        <right2 />
      </div>
      <div class="left-title">
        <span>流量</span>
      </div>
      <div class="left-content" style="height: 294px;padding-top: 10px">
        <right3 />
      </div>
    </div>
  </dv-full-screen-container>
</template>

<style scoped lang="scss">
.title{
  font-size: 30px;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  font-weight: bold;
  letter-spacing: 12px;
  // 动画左边-右边
  animation: title 1s;
  @keyframes title {
    0% {
      transform: translateY(-1000px);
    }
    100% {
      transform: translateX(0px);
    }
  }
}
.left{
  position: absolute;
  left: 23px;
  top: 92px;
  width: 457px;
  &-title{
    font-size: 20px;
    color: #17abdb;
    font-weight: bold;
    letter-spacing: 3px;
    background: #17abdb0d;
    height: 37px;
    line-height: 37px;
    span{
      display: inline-block;
      padding-left: 20px;
      height: 37px;
      line-height: 37px;
      font-weight: bold;
    }
    &:before{
      content: '';
      position: absolute;
      width: 4px;
      background: #17abdb;
      height: 37px;
    }
  }
  &-content{
    height: 293px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &-desc{
      width: 210px;
      height: 98px;
      background: rgba(13, 29, 40, 0.7);
      padding: 10px 0 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 3px solid #16333e;
      &-title{
        font-size: 18px;
        color: #9ea4a8;
        font-weight: bold;
        letter-spacing: 3px;
      }
      .dv-digital-flop{
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        letter-spacing: 3px;
        height: 45px;
      }
    }
  }
  #left1{
    width: 457px;
    height: 293px;
  }
}
.map{
  position: absolute;
  left: 497px;
  top: 92px;
  width: 930px;
  height: 900px;
}
.right{
  position: absolute;
  right: 23px;
  top: 92px;
  width: 457px;
  &-title{
    font-size: 20px;
    color: #17abdb;
    font-weight: bold;
    letter-spacing: 3px;
    background: #17abdb0d;
    height: 37px;
    line-height: 37px;
    span{
      display: inline-block;
      padding-left: 20px;
      height: 37px;
      line-height: 37px;
      font-weight: bold;
    }
    &:before{
      content: '';
      position: absolute;
      width: 4px;
      background: #17abdb;
      height: 37px;
    }
  }
  &-content{
    height: 293px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &-desc{
      width: 210px;
      height: 98px;
      background: rgba(13, 29, 40, 0.7);
      padding: 10px 0 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 3px solid #16333e;
      &-title{
        font-size: 18px;
        color: #9ea4a8;
        font-weight: bold;
        letter-spacing: 3px;
      }
      .dv-digital-flop{
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        letter-spacing: 3px;
        height: 45px;
      }
    }
  }
}
</style>
